<template>
  <div class="v-editor-adornment g-jc-sb g-pd-l-8">
    <div class="g-one-line content">
      <LegendPreview
        :width="40"
        :height="20"
        v-bind="valueData"
        :showText="false"
      ></LegendPreview>
    </div>
    <div
      v-if="selected && !row.readonly && !isModelDisabled && !tableElementDisabled"
      class="g-pd-r-4 img-btn"
    >
      <img
        src="statics/icons/app/iconmore.png"
        class="g-pointer"
        @click="handleClick"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropertyRow } from "../../types";
import { Ref, computed, inject } from "vue";
import { BusEvent } from "@/constants/Enums";
import { adornmentWindow } from "@/modules/model/modals/adornment";
import { propertyUtil } from "@/modules/model/comps/station/sider/attribute/PropertyUtil";
import { modelService } from "@/modules/model/service";
import LegendPreview from "@/modules/model/comps/station/sider/attribute/propertyEditors/custom/LegendPreview.vue";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 模型单选-树选择弹窗
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  tableElementDisabled?: boolean;
}>();

const valueData = computed(() => {
  return JSON.parse((props.row.value as string) || "{}");
});

const handleClick = () => {
  const row = props.row;
  adornmentWindow
    .popup({
      title: "样式属性",
      attrTip: "Adornment",
      data: row.value ? (row.value as string) : ""
    })
    .then(async res => {
      const value = res.data;
      if (value) {
        const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(row, app.activeProject!.config.id);
        dto.value = value;
        const result = await modelService.updateModelProperty(dto);
        if (result.code === 1000) {
          app.$bus.emit(BusEvent.REFRESH_PROPERTY, row.modelId, row.key);
        }
      }
    });
};
</script>
<style lang="scss" scoped>
.v-editor-adornment {
  height: 100%;
  .content {
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    > span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  > .img-btn {
    display: flex;
    align-items: center;
  }
}
</style>
